<template>
	<div id="cate">
		<!-- 头部搜索框 -->
		<div class="searvh" @click="$router.push({name:'search'})">
			<div>
				<van-icon name="search" color="#afafaf"/>
				<span>请输入搜索内容</span>
			</div>
		</div>
		<!-- 中间部分 -->
		<div class="main">
			<div class="left" ref="left">
				<div>
					<div @click="toTop(index)" ref="aa" :class="{active:active == index}" v-for="item,index in arr" :key="item.id">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="right" ref="bb">
				<rightlist :rightshujv="rightArr"></rightlist>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { Toast } from 'vant';
	Vue.use(Toast);
	import {cateLeftApi} from '@/api'
	import {cateRightApi} from '@/api'
	import BScroll from 'better-scroll'
	import rightlist from './right'
	export default {
		name:'cate',
		data(){
			return{
				arr:[],
				rightArr:[],
				active:0,
				isTrue:false,
			}
		},
		components:{rightlist},
		created() {
			this.cateLeftApi()
			Toast.loading({
			  message: '加载中...',
			  forbidClick: true,
			  duration:500
			});
		},
		methods:{
			async cateLeftApi(){
				let res = await cateLeftApi()
				this.arr = res.data.data.cate
				// console.log(this.arr)
			},
			async cateRightApi(params = "001"){
				let res = await cateRightApi(params)
				console.log(res)
				this.rightArr = res.data.data.cate
				// console.log(res)
			},
			toTop(index){
				console.log(index,this.active)
				if(this.active == index){
					// alert('aaa')
					return
				}
				this.scroll.scrollToElement(this.$refs.aa[index],1000)
				this.scrolls.scrollToElement(this.$refs.bb,1000)
				this.active = index
				this.cateRightApi(`${index+1}`.padStart(3,'0'))
				Toast.loading({
				  message: '加载中...',
				  forbidClick: true,
				  duration:500
				});
			},
		},
		mounted(){
			this.isTrue = true
		},
		watch:{
			arr(){
				this.$nextTick(()=>{
					this.scroll = new BScroll(this.$refs.left,{
						click:true
					})
					let {index} = this.$route.query
					if(index){
						this.scroll.scrollToElement(this.$refs.aa[index],1000)
					}
				})
			},
			rightArr(){
				this.$nextTick(()=>{
					this.scrolls = new BScroll(this.$refs.bb)
				})
			}
		},
		beforeRouteEnter: (to, from, next)=>{
			let index = to.query.index;
			index = index?Number(index):0;
		    next(vm => {
					// console.log(vm.isTrue)
					// console.log(index,vm.active)
		    		if(vm.isTrue){
		    			//缓存过了
		    			if(!index){
		    				//如果从那边过来时候没有带index数据，那莫就是分类点击的，就不变
							return
		    			}else{
		    				//从宫格进来的
		    				if(vm.active == index){
		    					//进行判断，是否点击的是同一个目标，判断index是否相同，若相同就return，若不同，就执行else代码
								return
		    				}else{
		    					// 发送对应ajax代码
								Toast.loading({
								  message: '加载中...',
								  forbidClick: true,
								  duration:500
								});
								vm.cateRightApi(`${index+1}`.padStart(3,'0'))
								vm.$nextTick(()=>{
									vm.scroll.scrollToElement(vm.$refs.aa[index],1000)
								})
		    				}
		    			}
		    		}else{
		    			//没有缓存
		    			if(index){
		    				//点击宫格
		    				// 发送对应的ajax
							Toast.loading({
							  message: '加载中...',
							  forbidClick: true,
							  duration:500
							});
							vm.cateRightApi(`${index+1}`.padStart(3,'0'))
		    			}else{
		    				//点击分类
		    				// 发送ajax
							vm.cateRightApi()
		    			}
		    		}
					if(!index){
						vm.active = 0
					}else{
						vm.active = index
					}
		    	})
		  },
	}
</script>

<style scoped lang="less">
	#cate{
		height: 100%;
		.main{
			height: 100%;
			display: flex;
			.left{
				width: 96px;
				height: 100%;
				overflow: hidden;
				padding-left: 10px;
				font-size: 16px;
				div{
					margin-bottom: 20px;
					padding-left: 5px;
					height: 25px;
					line-height: 25px;
					.active{
						font-size: 18px;
						border-left: 2px solid #48c46f;
						background-color: #fff;
					}
				}
			}
			.right{
				flex: 1;
				height: 100%;
				overflow: hidden;
				div{
				}
			}
		}
		.searvh{
			position: absolute;
			top: 0;
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			div{
				width: 350px;
				height: 30px;
				border-radius: 15px;
				background-color: #f2f2f2;
				display: flex;
				justify-content: center;
				align-items: center;
				color:#afafaf;
				span{
					margin-left: 5px;
				}
			}
		}
	}
</style>